<template>
  <div class="home">
    <h1>{{count}}</h1>
    <!-- <h1>{{this.$store.state.count}}</h1> -->
    <button @click="add">++</button>
    <button @click="dec">--</button>
    <!-- <h3>{{this.$store.getters.mul}}</h3> -->
    <h3>{{mul}}</h3>
    <hr />
    <!-- <h1>{{this.$store.state.name}}</h1> -->
    <!-- <h1>{{getName}}</h1> -->
    <h1>{{name}}</h1>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from 'vuex'
  export default {
    mounted() {
      // console.log(this);
      /*
       {abc: ƒ}
       abc: ƒ mappedState()
      */
      // console.log(mapState({abc:'bwf'}))
      // console.log(mapState({count:'count',abc:'bwf'}))
    },
    data() {
      return {
        // count: 0
      }
    },
    computed: {
      /* count() {
        return this.$store.state.count;
      }, */
      //---通过mapState函数生成计算属性,从state中获取数据---对象方式---
      // ...mapState({count:'count'}),
      /*
       通过mapState函数生成计算属性,从state中获取数据
       函数名和state中的属性名一样---数组方式
      */
      /* getName() {
        return this.$store.state.name
      }, */
      // ...mapState({getName:'name'}),
      ...mapState(['count', 'name']),
      /* mul() {
         return this.$store.getters.mul;
       } */
      // ...mapGetters({mul:'mul'})
      ...mapGetters(['mul'])
    },
    methods: {
      add() {
        // this.count++;
        // this.$store.state.count++;
        /*
          参数1:action中方法名
          参数2:普通参数
        */
        this.$store.dispatch('jiaA', 2);
      },
      dec() {
        // this.count--;
        // this.$store.state.count--;
        this.$store.commit('jianM', 6);
      }
    }
  }
</script>
